<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">

    <script>
        function checkUsername(){
            return /^[\u4e00-\u9fa5]{2,4}$/.test(document.getElementById("exampleInputName1").value);
        }
        function checkgender(){
            return /^男$|^女$/.test(document.getElementById("exampleInputName2").value);
        }
        function checkAge(){
            return /^\d{1,3}$/.test(document.getElementById("exampleInputName3").value);
        }
        function checkEmail(){
            return /^\w+@\w+[.]\w+$/.test(document.getElementById("exampleInputName4").value);
        }



        window.onload = function (){
            //离焦事件
            var usernameElement = document.getElementById("exampleInputName1");
            var genderElement = document.getElementById("exampleInputName2");
            var ageElement = document.getElementById("exampleInputName3");
            var emailElement = document.getElementById("exampleInputName4");

            usernameElement.onblur = function (){
                if (checkUsername()){
                    usernameElement.style.border = "";
                }else{
                    usernameElement.style.border = "1px solid red";
                }
            }
            genderElement.onblur = function (){
                if (checkgender()){
                    genderElement.style.border = "";
                }else{
                    genderElement.style.border = "1px solid red";
                }
            }
            ageElement.onblur = function (){
                if (checkAge()){
                    ageElement.style.border = "";
                }else{
                    ageElement.style.border = "1px solid red";
                }
            }
            emailElement.onblur = function (){
                if (checkEmail()){
                    emailElement.style.border = "";
                }else{
                    emailElement.style.border = "1px solid red";
                }
            }

            //表单提交
            document.getElementById("form").onsubmit = function (){
                if (checkUsername() && checkgender() && checkAge() && checkEmail()){
                    return true;
                }else{
                    return false;
                }
            }
        }


    </script>
</head>
<body>
    <h1 style="text-align: center">正则</h1>
<!--    表单-->
    <div class="container">
        <form class="form-inline" id="form" action="#" method="get">
            <div class="form-group">
                <label for="exampleInputName1">姓名</label>
                <input type="text" class="form-control" id="exampleInputName1" placeholder="请输入姓名">
            </div>
            <div class="form-group">
                <label for="exampleInputName2">性别</label>
                <input type="text" class="form-control" id="exampleInputName2" placeholder="请输入性别">
            </div>
            <div class="form-group">
                <label for="exampleInputName3">年龄</label>
                <input type="text" class="form-control" id="exampleInputName3" placeholder="请输入年龄">
            </div>
            <div class="form-group">
                <label for="exampleInputName4">邮箱</label>
                <input type="text" class="form-control" id="exampleInputName4" placeholder="请输入邮箱">
            </div>
            <div class="form-group">
                <input type="button" value="确定" class="btn btn-info" onclick="addRow()">
            </div>
        </form>
    </div>
    <hr>

</body>
</html>